import React from 'react';
import { Button, Select, Table, Pagination } from 'antd';
import { VtxModal, VtxMap } from 'vtx-ui';
import styles from './Details.less';
import { NAME_SPACE, DetailsSearchParams } from './config';
import moment from 'moment'

const Option = Select.Option

class Index extends React.Component{
  constructor(props){
    super(props)
    this.showDetail = this.showDetail.bind(this)
    this.goBack = this.goBack.bind(this)
  }

  showDetail(imgList){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        picVisable: true,
        imgList: imgList
      }
    })
  }
  
  goBack(){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        detailsModelVisable: false
      }
    })
  }

  render(){
    const {dispatch,
      detailsLoading,
      detailsPageNo,
      detailsPageSize,
      detailsTotal,
       // 人员名称
      userName,
      // 车牌号
      carNum,
      detailsSearchParams,
      details,
    } = this.props

    const tableProps = {
      autoFit: true,
      hideColumn: true,
      scroll:{
        y:`${document.documentElement.clientHeight - 100 - 120}px`,
      },
      indexColumn: true,
      showHeader: true,
      startIndex: (detailsPageNo) * detailsPageSize + 1,
      dataSource: details,
      loading: detailsLoading,
      pagination: false,
      columns: [
        {
          title: '序号', 
          key: '0',
          dataIndex: '0',
          ellipsis: true,
          render: (text, record, index) => {return `${index+1}`}
        },{
          title: '时间', 
          key: 'createTime',
          dataIndex: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.createTime - b.createTime,
          render: (text, record, index) => {return moment(text).format('HH:mm:ss')}
        },{
          title: '医疗机构名称', 
          key: 'hospitalName',
          dataIndex: 'hospitalName',
          ellipsis: true,
        },{
          title: '收集桶数(个)', 
          key: 'collectorBucketNum',
          dataIndex: 'collectorBucketNum',
          ellipsis: true,
        },{
          title: '收集重量(KG)', 
          key: 'collectorWeight',
          dataIndex: 'collectorWeight',
          ellipsis: true,
        },{
          title: '审核状态', 
          key: 'auditType',
          dataIndex: 'auditType',
          ellipsis: true,
          render: (text, record, index) => {
            let typeName 
            switch (record.auditType) {
              case 1:
                typeName = '审核中';
                break;
              case 2:
                typeName = '已同意'; 
                break;
              case 3:
                typeName = '已拒绝'; 
                break;
              default:
                break;
            }
            return typeName
          }
        },{
          title: '操作', 
          key: '6',
          dataIndex: '6',
          ellipsis: true,
          render: (text, record, index) => {
            let imgList = [record.frontWarehouseImg, record.frontCarriageImg, record.laterCarriageImg, record.laterWarehouseImg]
            return(
              <div className={styles.toDo}>
                <a onClick={() => {this.showDetail( imgList )}}>详情</a>
              </div>
            )
          }
        },
      ],
      rowKey: (record, index) => {
        return index
      },
    }
    const pagProps = {
      current: detailsPageNo ,
      defaultCurrent: 1,
      total: detailsTotal,
      pageSize: detailsPageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      onChange: (page) => {
        dispatch({
          type: `${NAME_SPACE}/updateState`,
          payload: {
            detailsPageNo: page 
          }
        });
        dispatch({
          type: `${NAME_SPACE}/getDetailsList`,
          payload: {
            type: 'page'
          }
        })
      },
      showTotal: (total) => {
          return `合计${total}条数据`
      },
      onShowSizeChange: (current, pageSize) => {
        dispatch({
          type: `${NAME_SPACE}/updateState`,
          payload: {
            detailsPageNo: 1,
            detailsPageSize: pageSize,
          }
        })
        dispatch({
          type: `${NAME_SPACE}/getDetailsList`,
          payload: {
            type: 'page'
          }
        })
      },
    }

    return (
      <div className={styles.normal}>
        <div className={styles.header}>
          <div className={styles.item}>
            <span className={styles.txt}>收运日期：</span>
            <span className={styles.content}>{detailsSearchParams.day}</span>
          </div>
          <div className={`${styles.item} ${styles.marginBase}`}>
            <span className={styles.txt}>车牌号：</span>
            <span className={styles.content}>{carNum}</span>
          </div>
          <div className={`${styles.item} ${styles.marginBase}`}>
            <span className={styles.txt}>驾驶员：</span>
            <span className={styles.content}>{userName}</span>
          </div>
          <div className={styles.btn}>
            <Button type='primary' onClick={() => {this.goBack()}}>返回</Button>  
          </div>
        </div>
        <div className={styles.table} style={{ height: document.documentElement.clientHeight-100 }}>
          <div className={styles.tableContent}>
            <Table {...tableProps}/> 
          </div>  
          <div className={styles.pagination}>
            <span className={styles.pagContent}> <Pagination {...pagProps}/> </span>  
          </div>  
        </div> 
      </div>
    )
  }
}

export default Index